<template>
	<el-dialog :title="dataForm.id?'修改':'新增'" :visible.sync="dialogVisible" :before-close="handleClose" width="640px">
		<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="120px" class="demo-ruleForm">
			<el-form-item label="需求类型" prop="level">
				<el-select v-model="dataForm.level" placeholder="请选择需求类型" :disabled="dataForm.id?true:false">
					<el-option v-for="item in xqList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<div class="hr_xian"></div>
			<div v-show="dataForm.level">
				<el-form-item label="需求名称" prop="title">
					<el-input v-model="dataForm.title" placeholder="请输入需求名称"></el-input>
				</el-form-item>
				<el-form-item label="企业名称" prop="corp_id">
					<el-select v-model="dataForm.corp_id" placeholder="选择企业" style="width: 100%;"
						:disabled="($store.state.userType=='4' || dataForm.id)?true:false">
						<el-option v-for="item in qyList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="联系人" prop="contact">
					<el-input v-model="dataForm.contact" placeholder="请输入联系人"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-model="dataForm.mobile" placeholder="请输入联系电话"></el-input>
				</el-form-item>
			</div>
			<div v-if="dataForm.level==1" prop="content">
				<el-form-item label="项目描述" prop="content">
					<el-input type="textarea" v-model="dataForm.content"></el-input>
				</el-form-item>
			</div>
			<div v-if="dataForm.level==2">
				<el-form-item label="物资名称" prop="wuzi">
					<el-input v-model="dataForm.wuzi" placeholder="请输入物资名称"></el-input>
				</el-form-item>
				<el-form-item label="期望交付时间" prop="jiaofu_time">
					<el-date-picker v-model="dataForm.jiaofu_time" type="date" value-format="yyyy-MM-dd"
						placeholder="期望交付时间" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="型号和规则" prop="xinghao">
					<el-input v-model="dataForm.xinghao" placeholder="请输入型号和规则"></el-input>
				</el-form-item>
				<el-form-item label="采购数量" prop="c_num">
					<el-input-number v-model="dataForm.c_num" controls-position="right" :min="1"
						:max="100000"></el-input-number>
				</el-form-item>
			</div>
			<div v-if="dataForm.level==3">
				<el-form-item label="需要完成时间" prop="end_time">
					<el-date-picker v-model="dataForm.end_time" type="date" value-format="yyyy-MM-dd"
						placeholder="需要完成时间" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="需求说明" prop="jiagong">
					<el-input v-model="dataForm.jiagong" placeholder="请填写具体需求情况和要点"></el-input>
				</el-form-item>
				<el-form-item label="图纸" prop="thumb">
					<uploadImg :limit="1" url="/api/publics/upload" title="支持图片,pdf,压缩包格式"
						accept="image/*,.pdf,.zip,.rar" @saveImgs="saveImg1" size="20" :img="img2">
					</uploadImg>
				</el-form-item>
				<el-form-item label="数量" prop="j_num">
					<el-input-number v-model="dataForm.j_num" controls-position="right" :min="1"
						:max="100000"></el-input-number>
				</el-form-item>

				<el-form-item label="项目描述" prop="xiangmu">
					<el-input type="textarea" v-model="dataForm.xiangmu"></el-input>
				</el-form-item>
			</div>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="small">取 消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	import uploadImg from '@/components/uploadImg.vue'
	export default {
		components: {
			uploadImg
		},
		data() {
			const uploadImg = (rule, value, callback) => {
				if (!this.dataForm.thumb) {
					callback(new Error('请上传图纸'))
				} else {
					callback()
				}
			}
			return {
				dialogVisible: false,
				dataForm: {
					id: '',
					level: '',
					title: '',
					corp_id: this.$store.state.userType == 4 ? Number(this.$store.state.company_id) : '',
					contact: '',
					mobile: '',
					content: '',
					wuzi: '',
					jiaofu_time: '',
					xinghao: '',
					c_num: '',
					end_time: '',
					jiagong: '',
					j_num: '',
					xiangmu: ''
				},
				rules: {
					level: [{
						required: true,
						message: '请选择需求类型',
						trigger: 'change'
					}],
					title: [{
						required: true,
						message: '请输入需求名称',
						trigger: 'blur'
					}],
					corp_id: [{
						required: true,
						message: '请选择企业',
						trigger: 'change'
					}],
					contact: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					wuzi: [{
						required: true,
						message: '请输入物资名称',
						trigger: 'blur'
					}],
					jiaofu_time: [{
						required: true,
						message: '请选择期望交付时间',
						trigger: 'change'
					}],
					xinghao: [{
						required: true,
						message: '请输入型号和规格',
						trigger: 'blur'
					}],
					c_num: [{
						required: true,
						message: '请输入采购数量',
						trigger: 'blur'
					}],
					end_time: [{
						required: true,
						message: '请选择需要完成时间',
						trigger: 'change'
					}],
					j_num: [{
						required: true,
						message: '请选择数量',
						trigger: 'blur'
					}],
					thumb: [{
						required: true,
						message: '请上传图纸',
						validator: uploadImg,
						trigger: 'change'
					}],
					jiagong: [{
						required: true,
						message: '请填写具体需求情况和要点',
						trigger: 'blur'
					}],
					xiangmu: [{
						required: true,
						message: '请输入项目描述',
						trigger: 'blur'
					}],
					content:[{
						required: true,
						message: '请输入项目描述',
						trigger: 'blur'
					}],
				},
				xqList: [{
					value: 1,
					label: '设计研发需求'
				}, {
					value: 2,
					label: '物资采购需求'
				}, {
					value: 3,
					label: '加工制造需求'
				}],
				qyList: [],
				fileList: [],
				img2:''
			}
		},
		methods: {
			init() {
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
					if (this.dataForm.id) {
						this.getInfo()
					}
				})
			},
			getInfo() {
				this.$nextTick(() => {
					this.$loading()
				})
				this.$http.post(`/api/order/edit_xuqiu `, {
					id: this.dataForm.id
				}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
					this.dataForm.status = String(this.dataForm.status)
					if(this.dataForm.thumb){
						this.img2={name: '图纸.jpg', url: process.env.VUE_APP_BASE_API+this.dataForm.thumb}
					}
				})
			},
			submitForm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						if (this.dataForm.id) {
							this.dataForm.is_post = 1
						} else {
							this.dataForm.is_post = ''
						}
						this.$loading()
						this.$http.post(!this.dataForm.id ? '/api/order/post' : '/api/order/edit_xuqiu', this.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 2000,
								onClose: () => {
									this.handleClose()
									this.resetForm()
									this.$emit('refreshDataList')
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			resetForm() {
				this.fileList = []
				this.dataForm.id=''
				this.$refs.dataForm.resetFields();
			},
			handleClose() {
				this.dialogVisible = false
			},
			getQyList() {
				this.$http.post('/api/publics/getcorplist', {
					limit: 1000,
					page: 1
				}).then(res => {
					this.qyList = res.result.data
				})
			},
			saveImg1(e) {
				this.dataForm.thumb = e
			}
		},
		created() {
			this.getQyList()
		}
	}
</script>
<style scoped lang="scss">

</style>